<template>
  <div>
    <div class="common-container goodslist-container">
      <!--条件-->
      <div class="goodslist-menu">
        <div class="goodslist-header">
          <p><a href="/">商品目录</a>  &gt; 一级目录 &gt; 2级目录</p>
        </div>
        <div class="goodslist-body">
          <form class="layui-form" action="http://baota.111zh.cn/goodscate/:pid.html" method="post" id="queryForm" name="queryForm">
            <input type="hidden" name="pid" value="1">
            <input type="hidden" name="cid" value="2">
            <input type="hidden" name="rid" value="">
            <input type="hidden" name="_order_field" value="">
            <input type="hidden" name="_order_way" value="DESC">
            <input type="hidden" name="_p" value="1">
          </form>
        </div>
      </div>
      <!--商品列表-->
      <div class="goodslist-box">
        <div class="goodsbox-header">
          <ul>
            <li class="choose-menu-active"><a href="javascript:void(0);" data-type="sort" data-key="" data-value="">综合排序<span>↑</span></a></li>
            <li><a href="javascript:void(0);" data-type="sort" data-key="sj" data-value="">上架时间</a></li>
            <li><a href="javascript:void(0);" data-type="sort" data-key="xl" data-value="">销量</a></li>
            <!-- <li><a href="javascript:void(0);" data-type="sort" data-key="pj" data-value="">评价</a></li> -->
          </ul>
          <!--          <img src="./易购卡卡盟系统-搭建卡盟系统首选易购卡_files/new.gif">-->
        </div>
        <div class="goodsbox-container">
          <div
            class="goodsbox-items"
            v-for="(tab, idx) in tableData"
            :key="idx">
            <div class="goodsbox-left">
              <a href="javascript:void(0);">
                <img src="http://img.111zh.cn/Uploads/Attachment/2021-07-21/60f79e4bc590f.jpg" :alt="tab.goodsName" :title="tab.goodsName">
              </a>
            </div>
            <div class="goodsbox-goodsinfo" style="top:15px;">
              <!--<h6><a href="/product/1.html" title="178231237517823123751782312375178231237517823123751782312375" style="color:#000" target="_blank">178231237517823123751782312375178231237517823123751782312375</a></h6>-->
              <h6><a href="javascript:void(0);" :title="tab.goodsName" style="color:#000">{{ tab.goodsName }}</a></h6>
              <p>商品编号：{{tab.goodsID}}</p>
              <div>
                <span class="badge-auth" style="background: #52ccba;">卡密商品</span>

              </div>
              <!--<p>近期已出售<span>24</span>次<span style="margin-left: 20px;color: #0e0e0e">库存:24个</span></p>-->

            </div>
            <div class="goodsbox-price">
              <p class="overwords">单价：<span>{{tab.goodsPrice}}</span>元</p>

              <p class="overwords">库存：<span><a style="color:red;">
                {{ tab.cardNum }}</a>个</span>
              </p>
            </div>
            <div class="goodsbox-collect">
              <i class="iconfont icon-aixin2"></i>
            </div>
            <div class="goodsbox-price" style="width: 80px;height: 20px;padding: 41px 0;left: 22px;">
              <span class="badge-auth badge-auth-b">自动发货</span>                            </div>
            <div class="goodsbox-btn">
              <!---->
              <!--<a class="layui-btn layui-btn-normal layui-btn-sm" href="/product/1.html" target="_blank">立即购买</a>-->
              <!---->
              <!-- <a v-if="row.cardNum && row.goodsState === 1" :href="`/submit?id=${row.goodsID}`" -->
              <nuxt-link v-if="tab.cardNum" :to="`/submit4?id=${tab.goodsID}`"
              >
                <el-button size="small" type="primary">提取卡密</el-button></nuxt-link
              >
              <el-button v-else size="small" disabled>提取卡密</el-button>
            </div>
          </div>
          <!--          <div id="goodslistpage" class="pagebox"><div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1"><a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">上一页</a><span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span><a href="javascript:;" class="layui-laypage-next layui-disabled" data-page="2">下一页</a></div></div>-->
        </div>
        <div class="goodsbox-container" v-if="tableData.length===0" >
          暂无数据
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import Recommends from '@/components/recommends'
import pageMixin from '@/mixins/page'
import {mapState} from 'vuex'

export default {
  layout: "webin24",
  components: {
    Recommends
  },
  mixins: [pageMixin],
  data() {
    return {
      isLoading: true,
      recommendsCategory: [],
      searchText: '',
      tableData: []
    }
  },
  created() {
    const {
      query: { keywords }
    } = this.$route
    if (keywords) {
      this.searchText = keywords
    }
    this.getList()
  },
  methods: {
    async getList() {
      this.isLoading = true
      const {
        query: { categoryId, recommend, recommendId }
      } = this.$route
      let url = ''
      let params = {}
      if (recommend) {
        url = '/goods/goods/catalogGoodsRecommendPage'
      } else if (recommendId) {
        url = '/goods/goods/getGoodsRecommendByCRIDClient'
        params.crID = recommendId
        const res = await this.$axios.get(url, { params })
        if (res.code === 1001 && res.body) {
          this.tableData = res.body
        }
        this.isLoading = false
        return
      } else {
        url = '/goods/goods/goodsPageClient'
        params = { pageNum: 1, pageSize: 20 }
        if (categoryId) {
          params.catalogID = categoryId
        }
        if (this.searchText) {
          params.goodsName = this.searchText
        }
      }
      const res = await this.$axios.post(url, null, { params })
      if (res.code === 1001 && res.body) {
        if (recommend) {
          this.tableData = res.body.records.map((item) => {
            return item.goodsShowVO
          })
        } else {
          this.tableData = res.body.records
        }
      }
      this.isLoading = false
    },
    doSearch() {
      if (!this.searchText) {
        return this.$message.error('请输入关键字')
      }
      this.$router.push(`/goods-list?keywords=${this.searchText}`)
    },
    detail(row) {
      this.$alert(
        `<h4>${row.goodsName}</h4><p>注意事项：${row.goodsNote}</p><p>商品介绍：${row.remark}</p>`,
        '商品信息',
        {
          dangerouslyUseHTMLString: true
        }
      )
    }
  },
  computed: {
    ...mapState({
      searchGoodsTxt: 'searchGoodsTxt'
    })
  },
  watch: {
    searchGoodsTxt (val) {
      this.searchText = val
      this.getList()
    }
  }
}
</script>

<style scoped>
.badge-auth{
	font-size: 12px;
	background: #409EFF;
	color: white !important;
	padding:4px 5px;
	border-radius: 2px;
}
.badge-auth-b{
	background: #67C23A;
}
.badge-auth-p{
	background: #ff6670;
}
.goodslist-container{
	margin-top: 10px !important;
	border-radius: 3px;
}
.goodslist-menu{
	position: relative;
	width: 100%;
	clear: both;
	padding:10px 20px 20px;
	background: white;
	box-sizing: border-box;
	border:1px solid #dcdcdc;
}
.goodslist-menu::after,.goodsmenu-items::after{
	display:block;
	clear:both;
	content:"";
	visibility:hidden;
	height:0;
}

.goodslist-header{
	position: relative;
	border-bottom: 1px solid #dcdcdc;
	box-sizing: border-box;
}
.goodslist-header p{
	font-size: 14px;
	line-height:40px;
	color: #666;
}
.goodsmenu-items{
	clear: both;
}
.gooslist-body-left{
	position: relative;
	width: 100px;
	float: left;
	padding: 10px 20px;
	box-sizing: border-box;
	font-size: 14px;
	color: #666;
	text-align: right;
}
.gooslist-body-right{
	position: relative;
	width: 1058px;
	float: left;
	padding: 10px;
	box-sizing: border-box;
	font-size: 14px;
	color: #666;
	min-height: 50px;
	border: 1px solid #dcdcdc;
	/* border-bottom: 1px solid #dcdcdc; */
}

.gooslist-body-right a{
	position: relative;
	display: block;
	width: 160px;
	height: 60px;
	margin-right: 10px;
	float: left;
	margin-bottom: 10px;
}
.gooslist-body-right a img{
	width:100%;
	height:100%;
	border:2px solid transparent;
}
.gooslist-body-right a.menu-active img{
	border:2px solid #1E9FFF;
}
.gooslist-body-right a.menu-active::after{
	position: absolute;
	content: '✔';
	top: 2px;
	left: 2px;
	display: block;
	width: 20px;
	height: 20px;
	background: #1E9FFF;
	color: white;
	text-align: center;
	font-size: 12px;
	line-height: 20px;
	color: white;
}
.gooslist-body-right a:nth-child(6n){
	margin-right: 10px;
}
.gooslist-body-right .layui-form-item{
	margin-bottom: 0;
}


.goodslist-box{
	position: relative;
	background: white;
	margin-top:10px;
	padding: 10px 20px;
	box-sizing: border-box;
	border:1px solid #ddd;
	min-height: 550px;
}

.goodsbox-header{
	position: relative;
	width: 100%;
	background:#f5f5f5;
	padding:5px 10px;
	box-sizing: border-box;
	overflow: hidden;
}
.goodsbox-header ul{
	position: relative;
	float: left;
	overflow: hidden;
	display:block;
	border:1px solid #ddd;
	border-right: 0;
	width: max-content;
}
.goodsbox-header ul li{
	display: block;
	line-height: 20px;
	float: left;
	border-right: 1px solid #ddd;
	background: white;
}
.goodsbox-header ul li a{
	display: block;
	color: #333;
	line-height:20px;
	padding:5px 15px;
}
.goodsbox-header ul li.choose-menu-active,.goodsbox-header ul li:hover{
	background: #1E9FFF;
	border-right: 1px solid #1E9FFF;
}
.goodsbox-header ul li.choose-menu-active a,.goodsbox-header ul li:hover a{
	color: white;
}
.goodsbox-header img{
	float: left;
	margin-left: 2px;
}

.goodsbox-container{
	position: relative;
	width: 100%;
	margin-top: 20px;
	overflow: hidden;
	padding-bottom:10px;
}
.goodsbox-items{
	position: relative;
	width: 100%;
	overflow: hidden;
	padding:10px 0;
	border-bottom: 1px dashed #dcdcdc;
}
.goodsbox-items:nth-child(1){
	border-top: 1px dashed #dcdcdc;
}
.goodsbox-left{
	position: relative;
	float: left;
	width: 100px;
	height: 100px;
}
.goodsbox-left a img{
	width: 100%;
	height: 100%;
	/* border-radius:2px; */
	border-radius: 5%;
}

.goodsbox-goodsinfo{
	position: relative;
	width:630px;
	float: left;
	padding: 0 20px;
	box-sizing: border-box;
}
.goodsbox-goodsinfo h6 a{
	display: block;
	width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-size: 14px;
	color: #111;
	line-height: 25px;
}
.goodsbox-goodsinfo p{
	line-height: 25px;
    font-size: 12px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #999;
}
/*.goodsbox-goodsinfo p:nth-child(2){
	font-weight: 600;
} */
.goodsbox-goodsinfo p:nth-child(3) span{
	color: #ff0000;
	margin: 0 2px;
}

.goodsbox-price{
	position: relative;
	width: 130px;
	float: left;
	height: 100px;
	padding:30px 0;
	box-sizing: border-box;
}
.goodsbox-price p{
	line-height:25px;
	font-size: 12px;
}
.goodsbox-price p span{
	color: #ff0000;
	margin-right: 2px;
}
.goodsbox-collect{
	position: relative;
	width: 70px;
	float: left;
	text-align: center;
}
.goodsbox-collect i{
	line-height: 100px;
	font-size:22px;
	cursor: pointer;
}
.collect-active{
	color: #ff0000;
}

.goodsbox-btn{
	position: relative;
	width:120px;
	float: right;
	text-align: center;
	padding: 35px 0;
}

.goodsinfo-container{
	background: white;
	overflow: hidden;
	padding:10px 20px 20px;
	box-sizing: border-box;
	overflow: hidden;
	margin-top: 10px !important;
	border:1px solid #dcdcdc;
	border-radius: 3px;
}



.goodsinfo-goodsimg img{
	width: 100%;
	height: 100%;
	border-radius: 2%;
}

.common-navigation{
	position: relative;
}
.common-navigation h6{
	line-height: 40px;
	font-size: 14px;
	color: #666;
}

.goodsinfo-introduce{
	position: relative;
	width: 100%;
	overflow: hidden;
}

.goodsinfo-goodsimg{
	position: relative;
	width: 400px;
	height: 400px;
	float: left;
}

.goodsinfo-nature{
	position: absolute;
	width: 330px;
	top: 50px;
	right: 100px;
}

.goodsinfo-nature img{
	width: 80px;
	height: 80px;
}




.goodsinfo-goodswords{
	position: relative;
	width: 700px;
	float: right;
}

.goodsinfo-goodswords h6{
	position: relative;
	font-size: 20px;
	font-weight: bold;
	line-height: 30px;
	margin-bottom: 5px;

}
.goodsinfo-goodswords p{
	line-height:35px;
	font-size: 14px;
}
.goodsinfo-goodswords p span{
	color: #ff0000;
	margin: 0 3px;
}

.goodsinfo-goodswords p .must-read{
	color: #666;
}

.goodsinfo-goodswords p i{
	font-size: 20px;
	vertical-align: sub;
	cursor:pointer;
	margin-left: 10px;
}
.goodsinfo-goodswords .layui-btn{
	margin-top: 70px;
	height: 40px;
    line-height: 40px;
    width: 136px;
    margin-right: 10px;

	font-size:16px;
}

.goodsinfo-comment{
	background: white;
	overflow: hidden;
	padding: 20px 20px 30px;
	box-sizing: border-box;
	border:1px solid #dcdcdc;
	margin-top: 10px !important;
	border-radius: 3px;
	min-height: 350px;
}

.goodsinfo-hasimg{
	position: absolute;
	top:50px;
	right:150px;
	width: 250px;
	display: none;
}
.goodsinfo-hasimg img{
	width: 110px;
	height: 110px;
	cursor: pointer;
	float: left;
	margin-right:20px;
	margin-bottom:20px;
	opacity: .4;
	transform: rotate(30deg);
}
.goodsinfo-hasimg img:nth-child(2n){
	margin-right: 0;
}
.goodsinfo-hasimg img:nth-child(2){
	transform: rotate(-30deg);
}
.goodsinfo-hasimg img:nth-child(3){
	transform: rotate(-30deg);
}
.goodsinfo-hasimg img:nth-child(4){
	transform: rotate(30deg);
}

</style>
<style lang="scss" scoped>
section + section {
  margin-top: 15px;
}
.search {
  padding: 10px 15px;
  background: white;
  .el-input {
    width: 400px;
  }
}
.goods {
  background: white;
  .el-pagination {
    text-align: right;
    padding: 20px;
  }
}
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style6/common.css';
// @import 'assets/style/style6/openlogin.css';
@import 'assets/style/style6/style.css';
// @import 'assets/style/style6/font_1451715_0505c2bxv7b7.css';
@import 'element-ui/lib/theme-chalk/index.css';
</style>
